﻿<div class="well well-large">
    <h1>Page 1</h1>
    <p>
        Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    </p>
    <p>
    	<a data-bind="navigate: 'pages/p3', payload: forPayload">Navigate to page 3 with payload</a>"
    </p>
    <p>
        Magic number is <span class="text-info" data-bind="text: num"></span>. You can <a href="#" data-bind="click: showMagicNumber">update it</a>.
    </p>
    <p>

    <div data-bind="visible: confirmationVisible">
        <div class="modal-footer">
            <span style="float: left;"><i class="icon-exclamation-sign"></i> Are you sure you want to leave this page?</span>
            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-bind="click: confirmYes">Yes</button>
            <button class="btn btn-primary" data-bind="click: confirmNo">No</button>
        </div>
    </div>
</div>